<script setup lang='ts'>
import { useGetReadMessage } from '@fl/api/man-api/message-center'
import { ElPagination } from 'element-plus'
import { ref, toRefs, watch } from 'vue'

import { READ_STATUS } from './constants'

const props = withDefaults(defineProps<{
    data?: any
    loading?: boolean
    selection?: boolean
    total?: any
}>(), {
    data: () => [],
    loading: false,
    selection: false,
    total: 0,
})
const emits = defineEmits(['pageChange', 'selectChange'])

const { data, selection, total } = toRefs(props)

const isInit = ref(false)
const list = ref<any>([])

function init() {
    isInit.value = true
    list.value = data.value.map((v: any) => {
        return {
            ...v,
            checked: false,
        }
    })
}

watch(data, (val: any) => {
    if (val) {
        init()
    }
}, {
    deep: true,
    immediate: true,
})

const state = {
    page: 1,
    size: 10,
}

const pages = ref({ ...state })

const { mutate } = useGetReadMessage()
function doRead(item: any) {
    // 读取状态 0未读 1已读
    if (!item.status) {
        // TODO：点击跳转对于详情页 标记为已读
        mutate({ id: item.id }, {
            onSuccess: () => {
                // ElMessage.success('操作成功')
            },
        })
    }
}

function handleSizeChange(val: any) {
    console.log('size', val)
    pageChange()
}
function handleCurrentChange(val: any) {
    console.log('page', val)
    pageChange()
}

function pageChange() {
    emits('pageChange', { ...pages.value })
}

function checkChange() {
    const checked = list.value.filter((v: any) => v.checked)

    emits('selectChange', checked)
}

// 全选操作
function checkAll(flag = true) {
    list.value.forEach((v: any) => {
        v.checked = flag
    })

    checkChange()
}

defineExpose({
    checkAll,
})
</script>

<template>
    <template v-if="list?.length">
        <div v-for="(item, index) in list"
             :key="index"
             class="protocol-list"
             @click="doRead(item)"
        >
            <p class="top flex justify-between">
                <span class="flex items-center">
                    <el-checkbox v-if="selection"
                                 v-model="item.checked"
                                 @change="checkChange"
                    />

                    <span class="top-label ml-10 truncate">{{ item.title }}</span>
                </span>

                <span class="top-label truncate">{{ item.createTime }}</span>
            </p>

            <div class="message-content">
                <div class="message-content-text">
                    <span class="isRead"
                          :class="{ '!bg-gray': item.status === READ_STATUS.READ }"
                    />

                    <div class="text"
                         :class="{ '!c-gray': item.status === READ_STATUS.READ }"
                    >
                        【{{ item.title }}】{{ item.content
                        }}
                    </div>
                </div>
            </div>
        </div>
    </template>

    <div v-else
         class="text-center"
    >
        暂无数据
    </div>

    <ElPagination v-model:current-page="pages.page"
                  v-model:page-size="pages.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  background
                  class="mt-20 flex justify-end"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
    />
</template>

<style lang="less" scoped>
@bg-color: #f5f6fa;
@label-color: gray;

.col-tips {
    .el-icon {
        color: @label-color;
        border: 1px solid @label-color;
        border-radius: 8px;
        padding: 2px;
        transform: translateY(2px);
        margin-right: 10px;
        margin-left: 5px;
    }
}

.protocol-list {
    width: 100%;
    border: 1px solid @bg-color;
    border-radius: 4px;
    margin-bottom: 20px;

    .top {
        width: 100%;
        background: @bg-color;
        color: #000;
        padding-left: 10px;

        .top-label {
            display: inline-block;
            color: @label-color;
            line-height: 35px;
            width: 250px;
        }
    }

    .message-content {
        width: 100%;
        // overflow: hidden;
        margin: 20px 0;
        display: flex;
        justify-content: center;
        .message-content-text {
            width: calc(100% - 80px);
            // overflow: hidden;
            // border: 1px solid blue;
            display: flex;
            align-items: center;
            .isRead {
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 3px;
                background: #da0004;
                flex-shrink: 0;
            }
            .text {
                margin-left: 5px;
                width: calc(100% - 6px);
                overflow: hidden;
                word-break: break-all;
            }
        }
    }
}
</style>
